<template>
	<div class="Ad_login">
		<div class="login_box">

			<!--表单区域-->
			<el-form
				label-width="0px"
				class="login_form"
				:model="loginForm"
				:rules="loginFormRules"
				ref="loginFormRef"
			>
				管理员登录
				<el-form-item prop="id">
					<el-input
						v-model="loginForm.id"
						prefix-icon="el-icon-user-solid"
					></el-input>
				</el-form-item>

				<el-form-item prop="password">
					<el-input
						v-model="loginForm.password"
						prefix-icon="el-icon-message-solid"
						type="password"
					></el-input>
				</el-form-item>

				<el-form-item class="btns">
					<el-button
						type="primary"
						@click="login"
					>登录</el-button>
					<el-button
						type="info"
						@click="resetLoginForm"
					>重置</el-button>
				</el-form-item>

			</el-form>
		</div>
	</div>
</template>
<script >

export default {
    name: 'Ad_login',
    data () {
        return {
			// 登录表单的数据绑定对象
            loginForm: {
                id: "",
                password: "",
            },
			// 验证规则
			loginFormRules:{
				//验证id
				id:[
					{required: true, message: "请输入管理员id",trigger: "blur"}
				],
				//验证密码
				password:[
					{required: true, message: "请输入密码" ,trigger: "blur"}
				]
			}
        }
    },
	methods:{
		//点击按钮 重置表单
		resetLoginForm(){
			// console.log(this)
			this.$refs.loginFormRef.resetFields();
		},
		// 表单登录前的预验证
		login(){
			this.$refs.loginFormRef.validate( async valid => {
				console.log(valid)
				if (!valid) return;
				console.log(this.loginForm)
				const {data:res} = await this.$http.post("ad_login",this.loginForm);
				console.log(this.loginForm)
				console.log(res)
				if (res.msg == "ok"){
					this.$message.success("操作！成功");
					this.$router.replace("/ad_home");
				}else{
					this.$message.error("操作失败");
				}
			})

						// this.$refs.loginFormRef.validate(async valid => {
			// 	if(!valid)return;
			// 	const {data: res} =await this.$http.post('st_login',this.loginForm);
			// 	console.log(res)
			// 	if(res.meta.status !== 200) return 
			// 	console.log("登陆失败")
			// });
			// console.log("登陆成功");

			//this.$message.success("登陆成功");
			//window.sessionStorage.setItem("token",res.data.token);
			//this.$router.replace("/ad_home");
		}
	}
}
</script>
<style scoped>
.Ad_login {
	background-color: rgb(101, 117, 117);
	height: 100%;
}

.login_box {
	width: 450px;
	height: 300px;
	border-radius: 3px;
	background-color: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.btns {
	display: flex;
	justify-content: flex-end;
}
.login_form {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}
</style>